<template>
  <div class="admin-dashboard-container">
    <!-- 顶部欢迎区域 -->
    <el-card class="welcome-card" shadow="hover">
      <div class="welcome-content">
        <div class="welcome-text">
          <h2>欢迎回来，管理员</h2>
          <p>系统运行正常，今日共有28个新订单</p>
        </div>
        <div class="action-buttons">
          <el-button type="primary" @click="$router.push('/stats')">
            <el-icon><TrendCharts /></el-icon>查看统计
          </el-button>
          <el-button @click="$router.push('/settings')">
            <el-icon><Setting /></el-icon>系统设置
          </el-button>
        </div>
      </div>
    </el-card>
    
    <!-- 统计卡片区域 -->
    <div class="stat-cards">
      <el-card class="stat-card" shadow="hover">
        <div class="stat-content">
          <div class="stat-info">
            <h3>总订单数</h3>
            <div class="stat-number">1,283</div>
            <div class="stat-trend up">
              <el-icon><ArrowUp /></el-icon>
              <span>12.4%</span>
              <span class="trend-period">较上周</span>
            </div>
          </div>
          <div class="stat-icon document">
            <el-icon><Document /></el-icon>
          </div>
        </div>
      </el-card>
      
      <el-card class="stat-card" shadow="hover">
        <div class="stat-content">
          <div class="stat-info">
            <h3>运输中订单</h3>
            <div class="stat-number">287</div>
            <div class="stat-trend up">
              <el-icon><ArrowUp /></el-icon>
              <span>8.2%</span>
              <span class="trend-period">较上周</span>
            </div>
          </div>
          <div class="stat-icon transit">
            <el-icon><Van /></el-icon>
          </div>
        </div>
      </el-card>
      
      <el-card class="stat-card" shadow="hover">
        <div class="stat-content">
          <div class="stat-info">
            <h3>今日签收</h3>
            <div class="stat-number">126</div>
            <div class="stat-trend down">
              <el-icon><ArrowDown /></el-icon>
              <span>3.7%</span>
              <span class="trend-period">较昨日</span>
            </div>
          </div>
          <div class="stat-icon completed">
            <el-icon><Check /></el-icon>
          </div>
        </div>
      </el-card>
      
      <el-card class="stat-card" shadow="hover">
        <div class="stat-content">
          <div class="stat-info">
            <h3>今日收入</h3>
            <div class="stat-number">¥5,782</div>
            <div class="stat-trend up">
              <el-icon><ArrowUp /></el-icon>
              <span>15.3%</span>
              <span class="trend-period">较昨日</span>
            </div>
          </div>
          <div class="stat-icon income">
            <el-icon><Money /></el-icon>
          </div>
        </div>
      </el-card>
    </div>
    
    <!-- 订单概览和图表区域 -->
    <div class="main-content">
      <!-- 左侧：订单状态分布图 -->
      <el-card class="chart-card" shadow="hover">
        <template #header>
          <div class="card-header">
            <h3>订单状态分布</h3>
            <el-radio-group v-model="timeRange" size="small">
              <el-radio-button label="week">本周</el-radio-button>
              <el-radio-button label="month">本月</el-radio-button>
              <el-radio-button label="year">全年</el-radio-button>
            </el-radio-group>
          </div>
        </template>
        <div class="chart-placeholder" ref="orderStatusChart">
          <!-- 这里会通过 ECharts 渲染图表 -->
          <div v-if="!chartRendered" class="chart-loading">
            <el-skeleton animated :rows="5" />
          </div>
        </div>
      </el-card>
      
      <!-- 右侧：快递区域分布 -->
      <el-card class="chart-card" shadow="hover">
        <template #header>
          <div class="card-header">
            <h3>区域分布</h3>
            <el-button-group>
              <el-button size="small" :type="mapType === 'from' ? 'primary' : ''" @click="mapType = 'from'">发件地</el-button>
              <el-button size="small" :type="mapType === 'to' ? 'primary' : ''" @click="mapType = 'to'">收件地</el-button>
            </el-button-group>
          </div>
        </template>
        <div class="chart-placeholder map-chart" ref="regionMapChart">
          <!-- 这里会通过 ECharts 渲染地图 -->
          <div v-if="!chartRendered" class="chart-loading">
            <el-skeleton animated :rows="7" />
          </div>
        </div>
      </el-card>
    </div>
    
    <!-- 待处理订单和快速操作 -->
    <div class="bottom-content">
      <!-- 左侧：待处理订单 -->
      <el-card class="pending-orders-card" shadow="hover">
        <template #header>
          <div class="card-header">
            <h3>待处理订单</h3>
            <el-button type="primary" link @click="navigateToOrders">查看全部</el-button>
          </div>
        </template>
        <el-table :data="pendingOrders" style="width: 100%" :show-header="false" v-loading="tableLoading">
          <el-table-column width="60">
            <template #default="scope">
              <el-avatar :size="36" :style="{ backgroundColor: getStatusColor(scope.row.status) }">
                {{ scope.row.status === 0 ? '新' : '待' }}
              </el-avatar>
            </template>
          </el-table-column>
          <el-table-column>
            <template #default="scope">
              <div class="order-item">
                <div class="order-number">{{ scope.row.orderNumber }}</div>
                <div class="order-info">
                  {{ scope.row.senderName }} → {{ scope.row.recipientName }} | {{ getStatusText(scope.row.status) }}
                </div>
              </div>
            </template>
          </el-table-column>
          <el-table-column width="120" align="right">
            <template #default="scope">
              <el-button type="primary" size="small" @click="processOrder(scope.row)">
                {{ scope.row.status === 0 ? '揽收' : '处理' }}
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-card>
      
      <!-- 右侧：快速操作 -->
      <el-card class="quick-actions-card" shadow="hover">
        <template #header>
          <div class="card-header">
            <h3>快速操作</h3>
          </div>
        </template>
        <div class="quick-actions">
          <div class="action-item" @click="navigateTo('/createOrder')">
            <el-button circle type="success">
              <el-icon><Plus /></el-icon>
            </el-button>
            <span>新建订单</span>
          </div>
          <div class="action-item" @click="navigateTo('/courier')">
            <el-button circle type="primary">
              <el-icon><Van /></el-icon>
            </el-button>
            <span>配送员管理</span>
          </div>
          <div class="action-item" @click="navigateTo('/settings')">
            <el-button circle type="warning">
              <el-icon><Setting /></el-icon>
            </el-button>
            <span>系统设置</span>
          </div>
          <div class="action-item" @click="navigateTo('/stats')">
            <el-button circle type="info">
              <el-icon><TrendCharts /></el-icon>
            </el-button>
            <span>绩效统计</span>
          </div>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { 
  Document, 
  Van, 
  Check, 
  Money, 
  ArrowUp, 
  ArrowDown,
  Plus,
  Setting,
  TrendCharts
} from '@element-plus/icons-vue'

// 图表状态
const chartRendered = ref(false)
const timeRange = ref('month')
const mapType = ref('to')
const tableLoading = ref(true)
const router = useRouter()

// 待处理订单数据
const pendingOrders = reactive([
  {
    id: 1,
    orderNumber: 'LG202405080001',
    senderName: '王五',
    recipientName: '赵六',
    status: 0
  },
  {
    id: 2,
    orderNumber: 'LG202405080015',
    senderName: '李四',
    recipientName: '张三',
    status: 1
  },
  {
    id: 3,
    orderNumber: 'LG202405080022',
    senderName: '陈七',
    recipientName: '钱八',
    status: 0
  },
  {
    id: 4,
    orderNumber: 'LG202405080036',
    senderName: '孙九',
    recipientName: '周十',
    status: 1
  }
])

// 获取状态文本
const getStatusText = (status: number) => {
  const statusMap: Record<number, string> = {
    0: '待揽收',
    1: '待发出',
    2: '运输中',
    3: '待签收'
  }
  return statusMap[status] || '未知状态'
}

// 获取状态对应的颜色
const getStatusColor = (status: number) => {
  const colorMap: Record<number, string> = {
    0: '#409EFF',
    1: '#67C23A',
    2: '#E6A23C',
    3: '#F56C6C'
  }
  return colorMap[status] || '#909399'
}

// 处理订单
const processOrder = (order: any) => {
  console.log('处理订单', order)
  // 实际项目中应该跳转到处理页面或打开处理弹窗
  router.push(`/order?id=${order.id}`)
}

// 导航到其他页面
const navigateTo = (path: string) => {
  router.push(path)
}

// 导航到订单页面
const navigateToOrders = () => {
  router.push('/order')
}

onMounted(() => {
  // 模拟加载数据
  setTimeout(() => {
    tableLoading.value = false
    chartRendered.value = true
    
    // 实际项目中，这里应该初始化ECharts图表
  }, 1000)
})
</script>

<style scoped>
.admin-dashboard-container {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-height: 100%;
  width: 100%;
  padding-bottom: 20px;
  overflow: visible; /* 让内容流动，不产生独立滚动条 */
}

/* 欢迎卡片 */
.welcome-card {
  background: linear-gradient(135deg, #409EFF 0%, #1a73e8 100%);
  color: white;
  border: none;
}

.welcome-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.welcome-text h2 {
  margin: 0 0 10px 0;
  font-size: 24px;
}

.welcome-text p {
  margin: 0;
  opacity: 0.8;
}

.action-buttons {
  display: flex;
  gap: 12px;
}

/* 统计卡片样式 */
.stat-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
  overflow: visible; /* 防止出现滚动条 */
}

.stat-card {
  border-radius: 8px;
  transition: all 0.3s;
  overflow: visible; /* 防止出现滚动条 */
}

.stat-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
}

.stat-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.stat-info h3 {
  font-size: 14px;
  color: #909399;
  margin: 0 0 10px 0;
}

.stat-number {
  font-size: 24px;
  font-weight: 600;
  margin-bottom: 5px;
}

.stat-trend {
  display: flex;
  align-items: center;
  font-size: 12px;
  gap: 3px;
}

.stat-trend.up {
  color: #67C23A;
}

.stat-trend.down {
  color: #F56C6C;
}

.trend-period {
  color: #909399;
  margin-left: 3px;
}

.stat-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  color: white;
}

.stat-icon.document {
  background-color: #409EFF;
}

.stat-icon.transit {
  background-color: #E6A23C;
}

.stat-icon.completed {
  background-color: #67C23A;
}

.stat-icon.income {
  background-color: #F56C6C;
}

/* 主要内容区域 */
.main-content {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(450px, 1fr));
  gap: 20px;
  overflow: visible; /* 防止出现滚动条 */
}

.chart-card {
  min-height: 380px;
  overflow: visible; /* 防止图表卡片出现滚动条 */
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.card-header h3 {
  font-size: 16px;
  font-weight: 600;
  margin: 0;
}

.chart-placeholder {
  height: 320px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible; /* 防止图表容器出现滚动条 */
}

.chart-loading {
  width: 90%;
}

.map-chart {
  background-color: #f5f7fa;
  border-radius: 4px;
}

/* 底部内容区域 */
.bottom-content {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  gap: 20px;
  overflow: visible; /* 防止出现滚动条 */
}

.pending-orders-card, .quick-actions-card {
  min-height: 300px;
  overflow: visible; /* 防止卡片内出现滚动条 */
}

.order-item {
  display: flex;
  flex-direction: column;
}

.order-number {
  font-weight: 600;
  margin-bottom: 5px;
}

.order-info {
  font-size: 12px;
  color: #606266;
}

.quick-actions {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  padding: 10px;
}

.action-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  transition: all 0.3s;
  padding: 15px;
  border-radius: 8px;
}

.action-item:hover {
  background-color: #f5f7fa;
}

.action-item span {
  margin-top: 8px;
  font-size: 14px;
}

@media (max-width: 768px) {
  .stat-cards, .main-content, .bottom-content {
    grid-template-columns: 1fr;
  }
  
  .chart-card {
    min-height: 300px;
  }
  
  .chart-placeholder {
    height: 250px;
  }
  
  .welcome-content {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
}
</style> 